Ext.onReady(function(){
	
	/* donde se administra los permisos*/		
	
	var states = Ext.create('Ext.data.Store', {
		fields: ['abbr', 'name'],
		data : [
		    {"abbr":"SI", "name":"Sistema"},
		    {"abbr":"PR", "name":"Proyecto"},
		    {"abbr":"FA", "name":"Fases"},
   		    {"abbr":"TI", "name":"Tipos Items"}
		    //...
		]
	});

	var tipo;

	Ext.define('Permiso', {
	    extend: 'Ext.data.Model',
	    fields: [
			{name: 'id_permiso',  type: 'int'},
			{name: 'nombre_permiso',   type: 'string'},
			{name: 'descripcion',   type: 'string'},
			{name: 'tipo',   type: 'string'},
	    ]
	    
	    
	});
	
		
	var form_agregar = Ext.create('Ext.form.Panel', {
					frame:true,
					bodyStyle:'padding:20px 20px 0',
					width: 642,
					heigth: 500,
					autoScroll :true,
					fieldDefaults: {
						msgTarget: 'side',
						labelWidth: 75
					},
					defaultType: 'textfield',
					
					defaults: {
						anchor: '100%'
					},
				
				items: [{
					xtype: 'textfield',
					name: 'nombre_rol',
					fieldLabel: 'Nombre del Rol',
					width: "100%",
					id:'nombre_rol',
					value:'holaa',
					allowblank: false
				},
				{
					xtype: 'textareafield',
					name: 'descripcion',
					fieldLabel: 'Descripcion',
					width: "100%",
					id:'descripcion',
					allowblank: false
				},{
		           	xtype: 'combo',
		           	fieldLabel: 'Relacionado a',
		           	name: 'state',
		           	store: states,
		           	queryMode: 'local',
					displayField: 'name',
				    valueField: 'abbr',
		           emptyText: 'Select a state...',
		           listeners: {

		/*funcion donde toma la accion de seleccionar rol sistema, proyecto, fase o tipo item*/             
                change: function(combo, newValue, oldValue){

					if (newValue == 'SI')
					{
						tipo = 'SI';
						var store = Ext.create('Ext.data.JsonStore', {
							model: 'Permiso',
							proxy: {
								type: 'ajax',
								url: '/permisos/listar',
								actionMethods: {
							           read: 'POST'
							       },
							    extraParams: {
    		             			   tipo: 'SI'
    		            			},
								reader: {
									type: 'json',
									root: 'permisos'
								}
							}
						});

						store.load();
					}
					else if (newValue == 'PR')
					{
						tipo = 'PR';
						var store = Ext.create('Ext.data.JsonStore', {
							model: 'Permiso',
							proxy: {
								type: 'ajax',
								url: '/permisos/listar',
								actionMethods: {
							           read: 'POST'
							       },
							    extraParams: {
    		             			   tipo: 'PR'
    		            			},
								reader: {
									type: 'json',
									root: 'permisos'
								}
							}
						});

						store.load();
					}
					else if(newValue == 'FA')
					{
						tipo = 'FA';
						var store = Ext.create('Ext.data.JsonStore', {
							model: 'Permiso',
							proxy: {
								type: 'ajax',
								url: '/permisos/listar',
								actionMethods: {
							           read: 'POST'
							       },
							    extraParams: {
    		             			   tipo: 'FA'
    		            			},
								reader: {
									type: 'json',
									root: 'permisos'
								}
							}
						});

						store.load();
					}else if(newValue == 'TI')
					{
						tipo = 'TI';
						var store = Ext.create('Ext.data.JsonStore', {
							model: 'Permiso',
							proxy: {
								type: 'ajax',
								url: '/permisos/listar',
								actionMethods: {
							           read: 'POST'
							       },
							    extraParams: {
    		             			   tipo: 'TI'
    		            			},
								reader: {
									type: 'json',
									root: 'permisos'
								}
							}
						});

						store.load();
					}

							/*Inicio del Panel*/


	var selModel = Ext.create('Ext.selection.CheckboxModel', {
		listeners: {
			selectionchange: function(sm, selections) {
				listView.down('#botonAsignar').setDisabled(selections.length == 0);
			}
		}
	});

	var listView = Ext.create('Ext.grid.Panel', {
		border: false,
//		features: [filters],

		store: store,						
		columns: [{
	            text: 'ID',
	            width: 40,
	            sortable: true,
//	            filterable: true,
	            dataIndex: 'id_permiso'
	        },{
	            header: 'Nombre',
	            flex: 1,
	            sortable: true,
//	            filterable: true,
	            dataIndex: 'nombre_permiso',
	            field: {
	                type: 'textfield'
	            }
	        },{
	            header: 'Descripcion',
	            flex: 1,
	            sortable: true,
//	            filterable: true,
	            dataIndex: 'descripcion',
	            field: {
	                type: 'textfield'
	            }
	        },{
	            header: 'Tipos',
	            flex: 1,
	            sortable: true,
//	            filterable: true,
	            dataIndex: 'tipo',
	            field: {
	                type: 'textfield'
	            }
	        }],
			columnLines: true,
			selModel: selModel,
			dockedItems: [{
					xtype: 'toolbar',
					dock: 'bottom',
					ui: 'footer',
					layout: {
						pack: 'center'
					},
					items: [{
						minWidth: 80,
						text: 'Crear',
				        itemId: 'botonAsignar',
						handler : function(){

			longitud=listView.getSelectionModel().getSelection().length;
			lista_permisos = new Array();
			i=0;
									
			while(i < longitud)
			{											
				lista_permisos.push(listView.getSelectionModel().getSelection()[i].data['id_permiso']);
				i=i+1;
			}
		
			Ext.Ajax.request({
				url: '/rol/agregar',
				params: {
					nombre_rol: Ext.getCmp('nombre_rol').value,
					descripcion: Ext.getCmp('descripcion').value,
					tipo:	tipo,
					lista_permisos:Ext.encode(lista_permisos)
				},
				success: function() {
					Ext.Msg.alert(':D', 'El rol se agrego con exito')

				},
				failure: function() {
					Ext.Msg.alert(':(', 'No se pudo agregar el rol')
				}
			}) /*fin funcion ajax*/
		}/* fin funcion Guardar*/
									},{
										minWidth: 80,
										text: 'Cancelar',
										handler: function() {
					         			   listView.up('window').hide();
					        			}
									}]
								}]
						
						
					});

	Ext.create('Ext.Window', {
		title: 'Lista de Permisos',
		plain:true,
		resizable: true,
		modal: true,
		height: 300,
		width: 500,
		layout: 'fit',
		items: listView
		}).show();






							/*Fin del Panel*/

                }
            }
                }],

//					buttonAlign: 'center',
//					buttons: [{
//						text: 'Crear',
//						handler: function() {
//							form_agregar.getForm().submit({
//							url: "/rol/agregar",
//							params: {
//								submit: "submit",
//								valor1: Ext.getCmp('checkbox1').value,
//								valor2: Ext.getCmp('checkbox2').value
//							},
//							method: "post",
//							waitTitle:'Conectando', 
//							waitMsg:'Enviando datos...',
//							success: function() {							
//								Ext.Msg.alert(":D", "El rol fue agregado con exito");
//							},
//							failure: function() {
//								Ext.Msg.alert(":(", "No se pudo almacenar el rol");
//							}	
//						})
//							
//						}
//					}],

				});

				Ext.create('Ext.panel.Panel', {
					title: 'Crear Rol',
//					closable:true,
					height: 500,
					autoScroll :true,
					width: 642,
					items: form_agregar,
					renderTo: Ext.Element.get('acciones'), 
				}).show();

						
});
